<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .tab {
        width: 500px;
        height: 200px;

        margin: 100px auto;
      }
      .tab_list {
        width: 100%;
        height: 50px;
      }
      .tab_list ul {
        display: flex;
        justify-content: space-between;
      }
      .tab_list li {
        width: 20%;
        list-style: none;

        line-height: 50px;
        text-align: center;
      }
      .tab_list a {
        height: 50px;
        width: 100px;
        text-decoration: none;
        font-size: 20px;
        color: black;
        font-weight: bold;

        padding-bottom: 5px;
      }
      .tab_con {
        width: 100%;
        height: 150px;
        background-color: #eeeeee;
        overflow: hidden;
      }
      .con_content {
        width: 80%;
        height: 50px;
        display: none;
        font-size: 15px;
        text-align: center;
        margin-left: 10%;
        margin-top: 20px;
        padding-top: 20px;
        /* background-color: #FFA500; */
      }

      .on {
        border-bottom: #ffa500 2px solid;
      }
    </style>
  </head>
  <body>
    <div class="tab">
      <div class="tab_list">
        <ul>
          <li class="on"><a href="script:;">公告</a></li>
          <li><a href="javascript:;">规则</a></li>
          <li><a href="javascript:;">论坛</a></li>
          <li><a href="javascript:;">安全</a></li>
          <li><a href="javascript:;">公益</a></li>
        </ul>
      </div>
      <div class="tab_con">
        <div class="con_content" style="display: block">
          <p>阿里苏宁发布"新三体"战略 打造未来十年格局</p>
          <p>高诚信会员无条件信任 200余万广告商品被处罚</p>
        </div>
        <div class="con_content">
          <p>出售假冒商品规则变更 商品发布数量限制变更</p>
          <p>中国质造市场管理规范变更 淘宝网营销规则变更</p>
        </div>
        <div class="con_content">
          <p>淘宝招募卖家志愿者 阿里推出兼职神器</p>
          <p>700家热风淘宝路 是赚钱还是骗子</p>
        </div>
        <div class="con_content">
          <p>淘宝用户必备神器 卖家账户安全9守则</p>
          <p>支付宝实名认证信息 账户没钱也被骗？</p>
        </div>
        <div class="con_content">
          <p>阿里联合公益计划启动 一图看懂联合公益计划</p>
          <p>公益宝贝卖家发票索取 公益机构淘宝开店攻略</p>
        </div>
      </div>
    </div>
    <script>
      // var tab_list=document.querySelector('.tab_list');
      var lis = document.querySelectorAll("li");
      var con = document.querySelectorAll(".con_content");
      // var lis=document.getElementsByTagName('li');
      for (let i = 0; i < lis.length; i++) {
        // lis[i].setAttribute('index',i);
        lis[i].addEventListener("mouseenter", function () {
          for (let j = 0; j < lis.length; j++) {
            lis[j].className = "";
          }
          this.className = "on";
          // var index=this.getAttribute('index');

          for (let j = 0; j < con.length; j++) {
            con[j].style.display = "none";
          }
          con[i].style.display = "block";
        });
      }
      // $(function(){
      // 	$('ul li').mouseover(function(){
      // 		$(this).addClass('on').siblings().removeClass('on');
      // 		var index =$(this).index();
      // 		$('.tab_con .con_content').eq(index).show().siblings().hide();
      // 	})
      // })
    </script>
  </body>
</html>
